<template>

    <div class="login-container">
        <!-- logo区域 -->
        <div class="logo">
            <img alt="" src="../assets/logo.png">
        </div>

        <!-- 登录表单区域 -->
        <el-form :model="user" :rules="userRules" class="loginform_style" label-width="0px" ref="userForm">
            <el-form-item prop="userName">
                <el-input placeholder="输入您的用户名" prefix-icon="el-icon-user-solid" v-model="user.userName"></el-input>
            </el-form-item>
            <el-form-item prop="userPass">
                <el-input placeholder="输入您的密码" prefix-icon="el-icon-lock" type="password"
                          v-model="user.userPass"></el-input>
            </el-form-item>
            <el-form-item class="btns">
              <el-button @click="login()" type="primary">登录</el-button>
              <el-button @click="chongzhi" type="info">重置</el-button>
            </el-form-item>
        </el-form>


    </div>

</template>

<script>
    export default {
        name: "Login",
        data(){
          return{
            user:{
              userName:'',
              userPass:''
            },
            userRules:{
              userName:[
                {required:true,message:"账号不能为空",tirgger:'blur'}
              ],
              userPass:[
                {required:true,message:"密码不能为空",tirgger:'blur'},
                {min:6,required:true,message:"密码长度必须大于6",tirgger:'blur'},
              ],
            }
          }
        },
      methods:{
        login:function () {
          this.$refs['userForm'].validate((valid)=>{
            if (!valid){
              return
            }
            this.$http.post("/doLogin?userName="+this.user.userName+"&userPass="+this.user.userPass).then((res)=>{

              if (res.data.success){
                console.log(res.data.result.user);
              sessionStorage.setItem("seller",JSON.stringify(res.data.result.seller));
                this.$message.success(res.data.message)
                this.$router.push("/home");
              }else {
                this.$message.error(res.data.message)

              }
            })
          })
        },
        chongzhi:function () {
          this.$refs['userForm'].resetFields();
        }
    }

    }

</script>

<style lang="less" scoped>
    .login-container {
        width: 500px;
        height: 314px;
        background-color: #fff;
        position: absolute;
        top: 25%;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 5px;

        .logo {
            width: 130px;
            height: 130px;
            border: 1px solid #eee;
            border-radius: 50%;
            padding: 8px;
            box-shadow: 0 0 10px #eee;
            position: absolute;
            left: 50%;
            transform: translateX(-50%) translateY(-60px);
            background-color: #fff;

            img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                background-color: #eee;
            }
        }

        .loginform_style {
            padding: 0 20px;
            margin-top: 110px;
        }

        .btns {
            display: flex;
            justify-content: center;
        }
    }

</style>
